<template>
	<view class="down-view"
		:style="downStyle">
		<view class="is-overlay" v-if="isShow" :style="{top:`${marginTop}px`}" @click="handlePopupMask" 	@touchmove.stop.prevent="handleMove" >

		</view>
		<view class="down-view-content" v-show="isShow" :class="{'is-show': isShow,'is-visible': isVisible,}">
			<view class="down-view-content-popup" :class="isShow ? 'is-show' : 'is-not-show'">
				<view class="down-view-popup-box">
					<slot name="slot1"></slot>
					<slot name="slot2"></slot>
					<slot name="slot3"></slot>
					<slot name="slot4"></slot>
					<slot name="slot5"></slot>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			/**
			 * 弹窗过渡时间
			 */
			duration: {
				type: [Number, String],
				default: 300,
			},
			/**
			 * 是否点击蒙层关闭 默认不关闭
			 */
			isCloseMask: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {
				isVisible: false,
				isShow: false,
				marginTop: 0
			}
		},
		computed: {
			/**
			 * 主题样式
			 */
			downStyle() {
				return `
        --down-popup-duration: ${this.duration / 1000}}s;
      `
			},
		},
		mounted() {
			this.$nextTick(() => {
				setTimeout(() => {
					this.getElementTop()
				},10)
			})
		},
		methods: {
			getElementTop() {
				var query = uni.createSelectorQuery().in(this);
				query.select('.down-view').boundingClientRect(data => {
					if (data) {
						// data.top就是元素的距离页面顶部的距离
						let topIconDistance = 44
						// #ifdef APP || MP-WEIXIN
						uni.getSystemInfo({
							success: (res) => {
								// 获取手机顶部状态栏的高度
								const statusBarHeight = res.statusBarHeight || 0;
								// 计算顶部图标距离
								topIconDistance = statusBarHeight
								this.marginTop = data.top + topIconDistance
							},
							fail: (err) => {
								console.error('获取系统信息失败:', err);
							},
						});
						// #endif
						// #ifdef H5
						this.marginTop = data.top + topIconDistance
						// #endif
					}
				}).exec();
			},
			/**
			 * 打开弹窗
			 * @param index 当前激活索引
			 */
			openMenuItemPopup() {
				this.isShow = true
				this.isVisible = true
				this.$emit('open')
			},
			/**
			 * 关闭弹窗
			 */
			closeMenuPopup() {
				this.isShow = false
				// 延迟移除下拉弹窗
				setTimeout(() => {
					this.isVisible = false
				}, this.duration)

				this.$forceUpdate()
				this.$emit('close')
			},
			/**
			 * 点击蒙层
			 */
			handlePopupMask() {
				if (!this.isCloseMask) return
				this.closeMenuPopup()
			},
			/**
			 * 清理滚动
			 */
			handleMove() {
				return false
			},
		},
	}
</script>

<style lang="scss" scoped>
	.is-overlay {
		position: fixed;
		z-index: 900;
		background-color: rgba(0, 0, 0, 0.5);
		width: 100%;
		height: 100%;
		opacity: 1;
		transition: opacity var(--down-popup-duration, 0.3s) linear;
	}

	.down-view {
		--dropdown-menu-height: 80rpx;
		--down-popup-duration: 0.3s;

		position: relative;
		z-index: 888;
		width: 100%;
		line-height: 1;



		&-content {
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
			box-sizing: border-box;
			width: 100%;
			overflow: hidden;
			visibility: hidden;
			margin-top: -2rpx;
			opacity: 0;
			transition: all var(--down-popup-duration, 0.3s) linear;

			&.is-show {
				z-index: 901;
				opacity: 1;
			}

			&.is-not-show {
				/* opacity: 0;
				z-index: 0; */
			}

			&.is-visible {
				visibility: visible;
			}

			&-mask {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				z-index: 9;
				width: 100%;
				background: rgba(0, 0, 0, 0.3);
			}

			&-popup {
				position: relative;
				z-index: 10;
				max-height: 100%;
				overflow: auto;
				transition: transform var(--down-popup-duration) linear;
				transform: translateY(-100%);

				&.is-show {
					transform: translateY(0);
				}
			}
		}

		&-popup-box {
			width: 100%;
			height: 100%;
			overflow: hidden;
			font-size: 28rpx;
			line-height: 1;
			transition: border-radius var(--down-popup-duration) linear;
		}
	}

</style>